<template>
  <div>
    <el-form :model="BioForm" :rules="BioFormRules" ref="BioFormRef" label-width="80px" label-position="left">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="BioForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="BioForm.gender">
          <el-radio label="保密"></el-radio>
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="BioForm.qq"></el-input>
      </el-form-item>
      <el-form-item label="自我介绍" prop="bio">
        <el-input type="textarea" v-model="BioForm.bio"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Session } from '../../assets/js/lib.js'
import { mapState } from 'vuex'
export default {
  data () {
    const isQQ = (rule, value, callback) => {
      // 1 首位不能是0  ^[1-9]
      // 2 必须是 [5, 11] 位的数字  \d{4, 9}
      var reg = /^[1-9][0-9]{4,9}$/gim
      if (value === '') {
        callback(new Error('请输入QQ号'))
      } else {
        if (this.BioForm.checkPass !== '') {
          if (reg.test(value)) {
            callback()
          } else {
            callback(new Error('QQ格式错误！'))
          }
        }
        callback()
      }
    }
    return {
      // 表单
      BioForm: {
        id: JSON.parse(Session.get('loginId')),
        nickname: '',
        gender: '',
        qq: '',
        bio: ''
      },
      // 表单校验规则
      BioFormRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        qq: [
          { validator: isQQ, trigger: 'blur' }
        ],
        bio: [
          { required: true, message: '自我介绍', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState(['userSet'])
  },
  created () {},
  methods: {
    handleSave () {
      // console.log(this.BioForm)
      const BioFormArr = []
      if (this.BioForm.gender === '') {
        return
      }
      this.$refs.BioFormRef.validate(valid => {
        if (!valid) {
          return false
        }
        Session.set('userSet', JSON.stringify(BioFormArr))
      })

      // 先取出用户设置的信息
      const BioArr = JSON.parse(Session.get('userSet'))
      // 判断是否有长度
      if (BioArr.length) {
        const isExist = BioArr.some(item => item.id === this.BioForm.id)
        if (isExist) {
          var newItem = BioArr.find(item => item.id === this.BioForm.id)
          newItem = this.BioForm
          BioArr.push(newItem)
          Session.set('userSet', JSON.stringify(BioArr))
        } else {
          BioArr.push(this.BioForm)
        }
      } else {
        BioFormArr.push(this.BioForm)
        Session.set('userSet', JSON.stringify(BioFormArr))
      }

      this.$refs.BioFormRef.resetFields()

      this.$router.go(0)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
